import React, { useState, useEffect, useRef } from "react";
import { Descriptions, message, Modal, Button } from "antd";
import { PageContainer, FooterToolbar } from "@ant-design/pro-layout";
import ProForm, { ProFormText, ProFormDependency } from "@ant-design/pro-form";
import { useLocation } from "umi";

import { getWaitDeliveryOrderInfoByRasId, deliverySubmitJdOrder } from "@/api/order";

import { ProCard } from "@ant-design/pro-components";
import { filterRasCode } from "@/const";

export default () => {
  const { bagCode } = useLocation().query;
  const formRef = useRef();
  const [info, setInfo] = useState({});
  const [loading, setLoading] = useState(false);

  const handleAddOrUpdate = async (fields) => {
    const postData = {
      // ...fields,
      schoolbagOrderId: info.orderId,
      schoolbagReadRecordId: info.readRecordId,
    };
    const res = await deliverySubmitJdOrder(postData);
    if (res.data) {
      message.success("发货成功");
      setInfo({});
      formRef.current.resetFields();
    }
  };

  useEffect(() => {
    if (bagCode) {
      handleQuery(bagCode);
    }
  }, [bagCode]);

  const handleQuery = async (bagCode) => {
    setLoading(true);
    const res = await getWaitDeliveryOrderInfoByRasId({
      bagCode,
    });
    if (res.data) {
      if (
        res.data?.readServiceStatus != 0 &&
        res.data?.readServiceStatus != 4
      ) {
        message.error("书包状态不处于发货状态，不能发货");
      }
      setInfo(res.data);
    }
    setLoading(false);
  };
  return (
    <PageContainer>
      <ProCard ghost>
        <ProForm
          labelCol={{
            span: 2,
          }}
          layout="inline"
          formRef={formRef}
          submitter={{
            // 配置按钮文本
            searchConfig: {
              submitText: "确定发货",
            },
            render: (props, dom) =>
              !loading &&
              info.schoolbagRasCode &&
              (info.readServiceStatus == 0 || info.readServiceStatus == 4) ? (
                <FooterToolbar>{dom[1]}</FooterToolbar>
              ) : null,
          }}
          onFinish={async (values) => {
            return await handleAddOrUpdate(values);
          }}
          initialValues={{
            bagCode,
          }}
        >
          <ProFormText
            width="lg"
            name="bagCode"
            placeholder="扫码/感应芯片关联发货的书包码"
            // onBlur={(e) => {
            //   if (!e.target.value) return;
            //   const bagCode = filterRasCode(e.target.value);
            //   handleQuery(bagCode);
            //   formRef.current.setFieldsValue({
            //     bagCode,
            //   });
            // }}
            rules={[
              { required: true, message: "请扫码/感应芯片关联发货的书包码" },
              {
                max: 50,
                message: "最长为50位",
              },
            ]}
          />

          <ProFormDependency name={["bagCode"]}>
            {({ bagCode }) => {
              return (
                <ProForm.Item>
                  <Button
                    loading={loading}
                    type="primary"
                    onClick={() => {
                      if (!bagCode) return;
                      const bagCodeShot = filterRasCode(bagCode);
                      handleQuery(bagCodeShot);
                      formRef.current.setFieldsValue({
                        bagCode: bagCodeShot,
                      });
                    }}
                  >
                    查询
                  </Button>
                </ProForm.Item>
              );
            }}
          </ProFormDependency>

          {info.schoolbagCode && (
            <>
              <ProCard title="书包信息" style={{ marginTop: 20 }}>
                <Descriptions>
                  <Descriptions.Item label="书包芯片码">
                    {info.schoolbagRasCode}
                  </Descriptions.Item>
                  <Descriptions.Item label="组号">
                    {info.groupCode}
                  </Descriptions.Item>
                  <Descriptions.Item label="书本数量">15本</Descriptions.Item>
                  <Descriptions.Item label="书包号">
                    {info.schoolbagCode}
                  </Descriptions.Item>
                  <Descriptions.Item label="期数">
                    第{info.serviceNum}期
                  </Descriptions.Item>
                </Descriptions>
              </ProCard>
              <ProCard style={{ marginTop: 20 }} title="发货信息">
                <Descriptions>
                  <Descriptions.Item label="书包名称">
                    {info.schoolbagName}
                  </Descriptions.Item>
                  <Descriptions.Item label="姓名电话">
                    {info.username}-{info.mobile}
                  </Descriptions.Item>
                  <Descriptions.Item label="用户地址">
                    {info.province}
                    {info.city}
                    {info.area}
                    {info.detail}
                  </Descriptions.Item>
                </Descriptions>
              </ProCard>
            </>
          )}
        </ProForm>
      </ProCard>
    </PageContainer>
  );
};
